<template>
  <div class="sj-form">
    <div class="submit-banner flex-box">
      <h4>确认信息是否正确，点击提交即可完成</h4>
    </div>
    <div class="submit-main">
      <dl>
        <dt class="flex-box">
          <p><span>01</span> 样本编号</p>
          <router-link to="/shaoma"><button>修改</button></router-link>
        </dt>
        <dd>
          <div class="input-box flex-box">
            <p class="name">样本编号</p>
            <p class="desc">{{formStartData}}</p>
          </div>
        </dd>
        <dd>
          <div class="input-box flex-box">
            <p class="name">受检者姓名</p>
            <p class="desc">{{sjzName}}</p>
          </div>
        </dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>02</span> 选择产品</p>
          <router-link to="/sjforma"><button>修改</button></router-link>
        </dt>
        <dd>
          <div class="input-box flex-box">
            <p class="name">您的产品</p>
            <p class="desc">全基因组基因检测-{{ProductTypeThis===1?"儿童":"成人"}}版</p>
          </div>
        </dd>
        <dd>
          <div class="input-box flex-box">
            <p class="name">检测内容</p>
            <p class="desc" v-on:click="showMoreDetail">点击<i>{{moreMsg}} </i>
              <span class="jiantou" v-bind:class="{ jiantouroate: showMore }"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use>
            </svg></span></p>
          </div>
          <transition name="fade-s">
            <div v-show="showMore">
              <ul v-show="ProductTypeThis === 1">
                <li class="input-box flex-box" v-for="(item, index) in childListData" :key="index">
                  <p class="name">{{item}}</p>
                </li>
              </ul>
              <ul v-show="ProductTypeThis === 2">
                <li class="input-box flex-box" v-for="(item, index) in adultListData" :key="index">
                  <p class="name">{{item}}</p>
                </li>
              </ul>
            </div>
          </transition>
        </dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>03</span> 样本信息</p>
          <router-link to="/sjformb"><button>修改</button></router-link>
        </dt>
        <dd v-for="(item, index) in formbData" :key="index" v-show="item.key">
          <div class="input-box flex-box">
            <p class="name">{{item.key}}</p>
            <p class="desc">{{item.value}}</p>
          </div>
        </dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>04</span> 个人信息</p>
          <router-link to="/sjformc"><button>修改</button></router-link>
        </dt>
        <dd v-for="(items, index) in formcData" :key="index">
          <div v-for="(item, index) in items" :key="index">
            <div class="input-box flex-box" v-if="item.value!=''">
              <p class="name">{{item.key}}</p>
              <p class="desc">{{item.value}}</p>
            </div>  
          </div>
        </dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>05</span> 个人病史</p>
          <router-link to="/sjformd"><button>修改</button></router-link>
        </dt>
        <dd v-for="(item, index) in formdData" :key="index">
          <div class="input-box flex-box">
            <p class="name">{{item.key}}</p>
            <p v-if="index==='isJinQin'" class="desc">{{item.selectType?item.selectType:(item.value===false?"否":"是")}}</p>
            <p v-else class="desc">{{item.selectType?item.selectType:(item.value===false?"无":"有")}}</p>
          </div>
          <div class="input-box flex-box" v-if = "item.value === true && item.describe.value != ''">
            <p class="name">{{item.describe.key}}</p>
            <p class="desc">{{item.describe.value}}</p>
          </div>
        </dd>
      </dl>
    </div>
    <div class="shaoma-footer flex-box">
     <button @click="formSubmit" class="commit active">提交</button>
    </div>
  </div>
</template>
<script>
import stepBar from "@/components/StepBar.vue";
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      ProductTypeThis: "",
      moreMsg: "展开",
      list: "",
      showMore: false,
      formStartData: "",
      sjzName: "",
      formaData: "",
      formbData: "",
      formcData: "",
      formdData: "",
      // eslint-disable-next-line
      childListData: ["儿童常见遗传疾病", "儿童个体化用药", "个体特征", "基因ID", "祖源"],
      // eslint-disable-next-line
      adultListData: ["成人常见遗传疾病", "成人个体化用药", "遗传性肿瘤", "祖源", "个体特征"],
      submitData: {
        sampleName: "",
        sampleNum: "",
        phoneNum: "",
        productCode: "",
        productType: "",
        productName: "",
        customerCode: "",
        bloodDate: "",
        createDate: "",
        birthDate: "",
        sampleType: "",
        sampleSex: "",
        sampleAge: "",
        nation: "",
        nativePlace: "",
        zidCard: "",
        address: "",
        email: "",
        personType: "",
        zisMarried: "",
        zintermarry: "",
        sjzType: "",
        zconsanguinity: "",
        zpreviousHistory: "",
        otherDiseasesHistory: "",
        zherc: "",
        zhercDesc: "",
        clinicalManifestation: "",
        clinicalManifestationDescription: "",
        fatherName: "",
        fatherAge: "",
        fatherNation: "",
        fatherNativePlace: "",
        fatherIdCard: "",
        motherName: "",
        motherAge: "",
        motherNation: "",
        motherNativePlace: "",
        motherIdCard: "",
        cancerType: "",
        cancerTypeOtherDesc: ""
      }
    };
  },
  components: {
    stepBar
  },
  computed: {
    ...mapState(["submitMsg"])
  },
  filters: {
    // wordsCheck(value) {
    //   // return value.match(/(?<=\uff08)(.+?)(?=\uff09)/g);
    // }
  },
  methods: {
    ...mapActions(["setSubmitMsg"]),
    showMoreDetail() {
      this.showMore = !this.showMore;
      if (this.showMore === true) {
        this.moreMsg = "收起";
      } else {
        this.moreMsg = "展开";
      }
    },
    timeChange(time) {
      let ds = time.replace(/[\u4e00-\u9fa5]/g, "-");
      // console.log(ds.split("-"));
      let td = ds.split("-");
      let yy = td[0],
        mm = td[1] < 10 ? "0" + td[1] : td[1],
        dd = td[2] < 10 ? "0" + td[2] : td[2];
      return yy + "-" + mm + "-" + dd;
    },
    formSubmit() {
      // console.log(JSON.stringify(this.submitData));
      $.ajax({
        type: "POST",
        dataType: "JSON",
        data: { data: JSON.stringify(this.submitData) },
        url:
          this.$API.api +
          "/report/?i=3&c=entry&m=nifty&do=mobile&d=WGSAppointment&f=setAppointmentSubmit",
        success: result => {
          // console.log(result);
          if (result.res === true) {
            this.$router.push("/submitSucess");
            window.localStorage.clear();
          } else {
            let self = this;
            this.setSubmitMsg(result.msg);
            this.$layer.open({
              content: result.msg,
              skin: "msg",
              time: 2
            });
            setTimeout(() => {
              self.$router.push("/submitFail");
            }, 2000);
          }
        },
        error: err => {
          this.$layer.open({
            content: err.status,
            skin: "msg",
            time: 2
          });
        }
      });
    }
  },
  mounted() {
    this.ProductTypeThis = window.ProductType;
    // console.log(this.timeChange("1987年12月8日"));
    // console.log(window.localStorage);
    // window.localStorage.removeItem();
    this.formStartData = window.localStorage.formStartMsg
      ? JSON.parse(window.localStorage.formStartMsg)
      : "";
    this.formaData = window.localStorage.formaMsg
      ? JSON.parse(window.localStorage.formaMsg)
      : "";
    this.formbData = window.localStorage.formbMsg
      ? JSON.parse(window.localStorage.formbMsg)
      : "";
    // console.log(JSON.parse(window.localStorage.formbMsg));
    this.formdData = window.localStorage.formdMsg
      ? JSON.parse(window.localStorage.formdMsg)
      : "";
    if (window.ProductType === 1) {
      this.formcData = window.localStorage.formcMsgChild
        ? JSON.parse(window.localStorage.formcMsgChild)
        : "";
    } else if (window.ProductType === 2) {
      this.formcData = window.localStorage.formcMsgAdult
        ? JSON.parse(window.localStorage.formcMsgAdult)
        : "";
    }
    console.log(this.formcData);
    this.sjzName = this.formcData.self.name.value;
    console.log(this.formaData);
    let SD = this.submitData,
      FS = this.formStartData,
      // FA = this.formaData,
      FB = this.formbData,
      FC = this.formcData,
      FD = this.formdData;
    SD.sampleName = FC.self.name.value;
    SD.sampleNum = FS;
    SD.phoneNum = FC.contact.tel.value;
    // SD.productCode = "DX1574";
    SD.productName =
      "全基因组基因检测" + (window.ProductType === 1 ? "儿童" : "成人") + "版";
    SD.productType = window.ProductType;
    SD.customerCode = FB.customerCode;
    SD.sampleType = FB.sampleType;
    SD.bloodDate = this.timeChange(FB.caiyangRQ.value);
    SD.createDate = this.timeChange(FB.songjianRQ.value);
    SD.birthDate = this.timeChange(FC.self.birthday.value);
    SD.sampleSex = FC.self.sex.value === "男" ? 1 : 2;
    SD.sampleAge = FC.self.age.value.slice(-5, -1);
    SD.nation = FC.self.nation.value;
    SD.nativePlace = FC.self.nation.value;
    if (window.ProductType === 2) {
      SD.zidCard = FC.self.sfzNumber.value;
      SD.zisMarried = FC.self.ismarried.value;
    }
    SD.address = FC.contact.address.value;
    SD.email = FC.contact.email.value;
    SD.personType = FD.shouJianType.selectIndex;
    SD.sjzType = FD.shouJianType.describe.value;
    SD.zconsanguinity = FD.isJinQin.describe.value;
    SD.zintermarry = FD.isJinQin.value === true ? 1 : 0;
    SD.zpreviousHistory = FD.isYiChang.value === true ? 1 : 0;
    SD.otherDiseasesHistory = FD.isYiChang.describe.value;
    SD.zherc = FD.isBingShi.value === true ? 1 : 0;
    SD.zhercDesc = FD.isBingShi.describe.value;
    SD.clinicalManifestation = FD.isLinChuang.value === true ? 1 : 0;
    SD.clinicalManifestationDescription = FD.isLinChuang.describe.value;
    if (window.ProductType === 1) {
      SD.fatherName = FC.father.name.value;
      SD.fatherAge = FC.father.age.value.slice(-5, -1);
      SD.fatherNation = FC.father.nation.value;
      SD.fatherNativePlace = FC.father.place.value;
      SD.fatherIdCard = FC.father.sfzNumber.value;
      SD.motherName = FC.mother.name.value;
      SD.motherAge = FC.mother.age.value.slice(-5, -1);
      SD.motherNation = FC.mother.nation.value;
      SD.motherNativePlace = FC.mother.place.value;
      SD.motherIdCard = FC.mother.sfzNumber.value;
    }
    SD.cancerType = FD.cancerType.selectIndex;
    SD.cancerTypeOtherDesc = FD.cancerType.describe.value;
    console.log(this.submitData);
  }
};
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  .submit-banner {
    width: 100%;
    height: r(72);
    background: url(../assets/img/form-submit-banner.png);
    background-size: 100%;
    h4 {
      font-size: r(18);
      color: #fff;
      letter-spacing: r(0.56);
      line-height: r(32);
    }
  }
  .submit-main {
    max-width: 750px;
    margin: 0 auto;
    dl {
      width: 100%;
      border-top: 1px solid #eee;
      border-top-width: r(15);
      padding-bottom: r(30);
      dt {
        width: 100%;
        height: r(72);
        padding-left: r(15);
        padding-right: r(15);
        box-sizing: border-box;
        background: #fff;
        justify-content: space-between;
        p {
          font-size: r(16);
          color: #717276;
          span {
            font-size: 22px;
            color: #53b4f9;
          }
        }
        button {
          border: 1px solid #53b4f9;
          border-radius: r(6);
          width: r(73);
          height: r(32);
          background: none;
          font-size: r(16);
          color: #53b4f9;
        }
      }
      dd {
        padding-left: r(15);
        padding-right: r(15);
        box-sizing: border-box;
        .input-box {
          justify-content: space-between;
          color: #717276;
          .name {
            font-size: r(16);
          }
          .desc {
            font-size: r(14);
            .jiantou {
              transition: 0.25s ease;
              display: inline-block;
              transform: rotate(-90deg);
            }
            .jiantouroate {
              transform: rotate(90deg);
            }
          }
          .desc-a {
            position: relative;
            right: r(-10);
          }
        }
        ul {
          padding-top: r(12);
          overflow: hidden;
          li.input-box {
            font-size: r(14);
            height: r(42);
            color: #999;
            overflow: hidden;
            border-bottom: none;
          }
        }
        .fade-s-enter-active,
        .fade-s-leave-active {
          transition: all 0.35s;
          height: auto;
          padding-top: r(12);
        }
        .fade-s-enter,
        .fade-s-leave-to {
          opacity: 0;
          height: 0;
          padding-top: 0;
        }
      }
    }
  }
  .shaoma-footer {
    position: relative;
  }
}
</style>
